<template>
	<basic-container>
		<avue-crud
			:option="option"
			:data="data"
			ref="crud"
			v-model="form"
			:table-loading="loading"
			:permission="permissionList"
			@row-update="rowUpdate"
			@row-save="rowSave"
			:page="page"
			@refresh-change="refreshChange"
			@search-change="searchChange"
			@search-reset="searchReset"
			@current-change="currentChange"
			@size-change="sizeChange"
			@on-load="onLoad"
		>
			<!-- 自定义添加搜索条件  按日期搜索  -->
			<template slot="search">
				<el-col :span="12">
					<el-form-item label="申请时间" style="display: inline-block;width: 50%;">
						<el-date-picker placeholder="开始时间" @change="getTime(0)" value-format="yyyy-MM-dd" v-model="beginAddTime" type="date" size="mini"></el-date-picker>
					</el-form-item>
					<el-form-item label="至" label-width="40px" style="display: inline-block;width: 50%;">
						<el-date-picker placeholder="结束日期" @change="getTime(1)" value-format="yyyy-MM-dd" v-model="endAddTime" type="date" size="mini"></el-date-picker>
					</el-form-item>
				</el-col>
			</template>
			<!-- 审核按钮  -->
			<template slot-scope="{ row }" slot="menu">
				<el-button type="primary" size="small" plain @click.stop="getDetail(row.id)">查看</el-button>
			</template>
		</avue-crud>

		<el-drawer title="申请记录详情" :visible.sync="dialogTableVisible" size="70%">
			<avue-form ref="obj" v-model="obj" :option="optionView">
				<template slot="menuForm">
					<el-button size="mini" @click="cancel()">取 消</el-button>
				</template>
			</avue-form>
		</el-drawer>
	</basic-container>
</template>

<script>
import { getList, getWithDrawRecordDetail } from '@/api/account/withDrawRecord/withDrawRecord';

import { mapGetters } from 'vuex';
var Dict = JSON.parse(localStorage.getItem('mall-dictionary')).content;
var CHECKDIC = [
	{
		label: '未处理',
		value: 0
	},
	{
		label: '审核通过',
		value: 1
	},
	{
		label: '审核拒绝',
		value: 2
	},
	{
		label: '未打款',
		value: 3
	},
	{
		label: '已完成',
		value: 4
	}
];
export default {
	data() {
		return {
			beginAddTime: '',
			endAddTime: '',
			form: {},
			obj: {},
			arroyAllDict: {},
			query: {},
			loading: true,
			rolesTree: [],
			rolesKeys: [],
			box: false,
			dialogTableVisible: false,
			page: {
				pageSize: 10,
				currentPage: 1,
				total: 0
			},
			option: {
				align: 'center',
				size: 'mini',
				tip: false,
				border: true,
				index: false,
				selection: false,
				addBtn: false,
				editBtn: false,
				delBtn: false,
				viewBtn: false,
				rowKey: 'id',
				height: 'auto',
				// calcHeight: 380,
				menuWidth: 200,
				searchMenuSpan:6,
				column: [
					{
						label: '申请人',
						prop: 'applicationUserName',
						width: 120,
						fixed: true
					},
					{
						label: '申请时间',
						prop: 'addTime',
						width: 200
					},
					{
						label: '提现金额(￥)',
						prop: 'amount',
						width: 120
					},
					//  暂时去掉
					// {
					//   label: "服务费",
					//   prop: "serviceAmount",
					// },
					{
						label: '提现方式',
						prop: 'payWay',
						width: 120,
						dicData: Dict.payWayEnum
					},
					{
						label: '收款账号',
						prop: 'account',
						search: true
					},
					{
						label: '状态',
						prop: 'status',
						search: true,
						type: 'select',
						width: 120,
						dicData: Dict.withDrawStatusEnum
					}
				]
			},
			optionView: {
				size: 'samll',
				mock: false,
				submitBtn: false,
				emptyBtn: false,
				menuPostion: 'center',
				labelWidth: '100',
				group: [
					{
						label: '基本信息',
						prop: 'group0',
						column: [
							{
								label: '原账户',
								prop: 'uaAccountName',
								width: 80,
								fixed: true,
								disabled: true,
								display: true,
								placeholder: '原账户'
							},
							{
								label: '提现账户',
								prop: 'account',
								disabled: true,
								display: true,
								placeholder: '提现账户'
							},
							{
								label: '申请人',
								prop: 'applicationUserName',
								width: 120,
								disabled: true,
								display: true,
								placeholder: '申请人'
							},
							{
								label: '申请时间',
								prop: 'addTime',
								width: 200,
								disabled: true,
								display: true,
								placeholder: '申请时间'
							},
							{
								label: '申请原因',
								prop: 'remark',
								type: 'textarea',
								disabled: true,
								value: false,
								display: true,
								placeholder: '申请原因'
							},
							{
								label: '提现金额',
								prop: 'amount',
								disabled: true,
								display: true,
								placeholder: '提现金额'
							},
							//暂时去掉
							// {
							//     label: "服务费",
							//     prop: "serviceAmount",
							//     disabled:true,
							// },
							{
								label: '提现渠道',
								prop: 'payWay',
								type: 'select',
								disabled: true,
								dicData: Dict.payWayEnum,
								display: true,
								placeholder: '提现渠道'
							},
							{
								label: '状态',
								prop: 'status',
								type: 'select',
								dicData: Dict.withDrawStatusEnum,
								disabled: true,
								display: true,
								placeholder: '状态'
							},
							{
								label: '审核操作人',
								prop: 'operationUserName',
								disabled: true,
								display: true,
								placeholder: '审核操作人'
							},
							{
								label: '审核操作时间',
								prop: 'operationTime',
								disabled: true,
								display: true,
								placeholder: '审核操作时间'
							},
							{
								label: '审核拒绝原因',
								prop: 'refuseRemark',
								disabled: true,
								type: 'textarea',
								display: true,
								placeholder: '审核拒绝原因'
							},
							{
								label: '打款人',
								prop: 'payManName',
								disabled: true,
								display: true,
								placeholder: '打款人'
							},
							{
								label: '打款时间',
								prop: 'payTime',
								disabled: true,
								display: true,
								placeholder: '打款时间'
							},
							{
								label: '打款状态',
								prop: 'payStatus',
								type: 'select',
								dicData: Dict.payStatusEnum,
								disabled: true,
								display: true,
								placeholder: '打款状态'
							},
							{
								label: '打款描述',
								prop: 'payRemark',
								type: 'textarea',
								disabled: true,
								display: true,
								placeholder: '打款描述'
							}
						]
					}
				]
			},
			data: []
		};
	},
	watch: {
		'obj.status'() {
			//状态:0未处理，1审核通过，2审核拒绝 , 3未打款 ，4已完成
			if (this.obj.status == 0) {
				this.optionView.group[0].column[8].display = false; //审核操作人
				this.optionView.group[0].column[9].display = false; //审核操作时间
				this.optionView.group[0].column[10].display = false; //审核拒绝原因
				this.optionView.group[0].column[11].display = false; //打款人
				this.optionView.group[0].column[12].display = false; //打款时间
				this.optionView.group[0].column[13].display = false; //打款状态
				this.optionView.group[0].column[14].display = false; //打款描述
			} else if (this.obj.status == 1) {
				this.optionView.group[0].column[8].display = true; //审核操作人
				this.optionView.group[0].column[9].display = true; //审核操作时间
				this.optionView.group[0].column[10].display = false; //审核拒绝原因
				this.optionView.group[0].column[13].display = true; //打款状态
			} else if (this.obj.status == 2) {
				this.optionView.group[0].column[10].display = true; //审核拒绝原因
				this.optionView.group[0].column[11].display = false; //打款人
				this.optionView.group[0].column[12].display = false; //打款时间
				this.optionView.group[0].column[13].display = false; //打款状态
				this.optionView.group[0].column[14].display = false; //打款描述
			} else if (this.obj.status == 3) {
				this.optionView.group[0].column[8].display = true; //审核操作人
				this.optionView.group[0].column[9].display = true; //审核操作时间
				this.optionView.group[0].column[10].display = false; //审核拒绝原因
				this.optionView.group[0].column[13].display = true; //打款状态
			} else if (this.obj.status == 4) {
				this.optionView.group[0].column[8].display = true; //审核操作人
				this.optionView.group[0].column[9].display = true; //审核操作时间
				this.optionView.group[0].column[10].display = false; //审核拒绝原因
				this.optionView.group[0].column[13].display = true; //打款状态
				this.optionView.group[0].column[11].display = true; //打款人
				this.optionView.group[0].column[12].display = true; //打款时间
				this.optionView.group[0].column[14].display = true; //打款描述
			}
		},
		'obj.payStatus'() {
			//打款状态:0:已打款，1未打款
			if (typeof this.obj.payStatus == 'number' && this.obj.payStatus == 1) {
				this.optionView.group[0].column[11].display = false; //打款人
				this.optionView.group[0].column[12].display = false; //打款时间
				this.optionView.group[0].column[14].display = false; //打款描述
			} else if (typeof this.obj.payStatus == 'number' && this.obj.payStatus == 0) {
				this.optionView.group[0].column[11].display = true; //打款人
				this.optionView.group[0].column[12].display = true; //打款时间
				this.optionView.group[0].column[14].display = true; //打款描述
			} else {
				this.optionView.group[0].column[11].display = false; //打款人
				this.optionView.group[0].column[12].display = false; //打款时间
				this.optionView.group[0].column[14].display = false; //打款描述
			}
		}
	},
	computed: {
		...mapGetters(['permission', 'userInfo']),
		permissionList() {
			return {};
		}
	},
	methods: {
		//打开审核抽屉
		getDetail(id) {
			getWithDrawRecordDetail(id).then(res => {
				if (res.data.code == 200) {
					this.obj = res.data.data;
					console.log(this.obj);
					this.dialogTableVisible = true;
				} else {
					this.$message({
						message: res.data.message,
						type: 'warning'
					});
					return;
				}
			});
		},
		getTime(type) {
			if (this.beginAddTime > this.endAddTime) {
				if (type == 0&&this.endAddTime!='') {
					//先输入结束时间
					this.$message({
						type: 'error',
						message: '开始时间不能大于结束时间'
					});
					this.beginAddTime = '';
				} else if (type == 1&&this.beginAddTime!='') {
					//先输入开始时间
					this.$message({
						type: 'error',
						message: '结束时间不能小于开始时间'
					});
					this.endAddTime = '';
				}
			}
		},
		rowSave(row, loading, done) {
			row.position = row.positionIds;
			row.deptName = row.$deptId;
			row.repassword = row.password;
			add(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					done();
					console.log(error);
				}
			);
		},
		rowUpdate(row, index, loading, done) {
			row.position = row.positionIds;
			update(row).then(
				() => {
					loading();
					this.onLoad(this.page);
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
				},
				error => {
					done();
					console.log(error);
				}
			);
		},

		searchReset() {
			this.query = {};
			this.beginAddTime = '';
			this.endAddTime = '';
			if (this.data.length == 1) {
				this.page.currentPage -= 1;
			}
			this.onLoad(this.page);
		},
		searchChange(params,done) {
			this.page.currentPage = 1;
			this.query = params;
			params.beginAddTime = this.beginAddTime;
			params.endAddTime = this.endAddTime;
			console.log(params);
			this.onLoad(this.page, params,done);
		},
		currentChange(currentPage) {
			this.page.currentPage = currentPage;
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
		},
		refreshChange() {
			this.onLoad(this.page);
		},
		onLoad(page, params = {},done) {
			this.loading = true;
			getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
				if(done){
					done();
				}
				this.loading = false;
				this.page.total = res.data.count;
				this.data = res.data.data;
			});
		},
		cancel() {
			this.dialogTableVisible = false;
			this.obj.remark = '';
		}
	}
};
</script>

<style></style>
